<template>
  <div class="center-menu-wrapper" @click.stop="flag = false" v-if="flag">
    <div class="menu-list-center" @click.stop>
      <div class="menu-list-border">
        <div class="center-li" v-for="item in appList" :key="item.code">
          <div class="center-block" @click="toRoute(item.code)">
            <img :src="item.icon" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">{{item.name}}</h4>
              <p class="center-desc">
               {{item.description}}
              </p>
              <div class="center-func">
                <p v-if="condition(item.code)&&item.status=='RUNNING'">进入管理后台</p>
                <p v-else-if="item.status=='PREPARING'">应用正在开发中，敬请期待...</p>
                <p v-else>待开通，请联系商务人员</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="center-li">
          <div class="center-block" @click="toRoute('FLOW')">
            <img src="@/assets/menu/icon-zidong.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">营销自动化平台</h4>
              <p class="center-desc">
                以数据为基础构建实时、精准、敏捷、闭环的图形自动化营销流程，优化企业营销策略，助力实现大规模营销增长
              </p>
              <div class="center-func">
                <p v-if="condition('FLOW')">进入管理后台</p>
                <p v-else>待开通，请联系商务人员</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="center-li">
          <div class="center-block" @click="toRoute('ACTIVITY')">
            <img src="@/assets/menu/icon-huodong.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">营销活动管理平台</h4>
              <p class="center-desc">
                多类多套热门活动模板，定期迭代更新，运营人员无需懂得编程即可快速配置上线
              </p>
              <div class="center-func">
                <p v-if="condition('ACTIVITY')">进入管理后台</p>
                <p v-else>待开通，请联系商务人员</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="center-li">
          <div class="center-block" @click="toRoute('MATERIAL')">
            <img src="@/assets/menu/Icon-neirong.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">内容管理平台</h4>
              <p class="center-desc">
                预置丰富的内容素材库，覆盖新客留存、存量
              </p>
              <div class="center-func">
                <p>应用正在开发中，敬请期待...</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="center-li">
          <div class="center-block" @click="toRoute('MALL')">
            <img src="@/assets/menu/icon-shangcheng.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">商城管理平台</h4>
              <p class="center-desc">
                综合商城管理平台，包括但不限于分期商城、积分商城、权益商城等
              </p>
              <div class="center-func">
                <p @click.stop="toRoute('MALL', { specificPage: '/mall/pointsmall/malllist' })" v-if="condition('MALL')">
                  进入管理后台
                </p>
                <p v-else>待开通，请联系商务人员</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="center-li">
          <div class="center-block" @click="toRoute('AD')">
            <img src="@/assets/menu/icon-guanggao.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">综合广告平台</h4>
              <p class="center-desc">一站式数据智能营销广告精准投放平台</p>
              <div class="center-func">
                <p>应用正在开发中，敬请期待...</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="center-li">
          <div class="center-block" @click="toRoute('MARKETING')">
            <img src="@/assets/menu/icon-yuangong.png" alt="" class="center-img" />
            <div class="center-content">
              <h4 class="center-title">社区经理之家</h4>
              <p class="center-desc">
                一集合厅堂营销、龙虎榜、业绩追踪、客户管理等功能于一体，便捷营销助力增长
              </p>
              <div class="center-func">
                <p v-if="condition('MARKETING')">进入管理后台</p>
                <p v-else>待开通，请联系商务人员</p>
                <img src="@/assets/menu/Icon-jinru.png" alt="" />
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useMenu } from "@/compositions/main/useMenu";
import { usePermission } from "@/compositions/main/usePermission";
import {queryAppList} from "@/api/orgPosition";
const { toRoute } = useMenu()
const { condition } = usePermission()

const props = defineProps<{ show: boolean }>()
const emits = defineEmits(['update:show'])
const appList = ref([] as Array<any>);
const getAppPageList = async (): Promise<void> => {
  const rs = await queryAppList({
    simple: false,
    includeMerchant: false,
  });
  if (rs.code == 200) {
    appList.value = rs.payload;
  }
};
const flag = computed({
  get() {
    return props.show
  },

  set(val) {
    emits('update:show', val)
  }
})
onMounted(() => {
  getAppPageList();
});
</script>

<style scoped lang="scss">
.center-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}

.menu-list-center {
  width: 100vw;
  height: 500px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: fixed;
  top: 60px;
  left: 0px;
  z-index: 333;
  padding: 40px 0;
  box-sizing: border-box;
  overflow-y:auto;
  .menu-list-border {
    width: 1050px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
  }

  .center-li {
    width: 33%;
    height: 194px;
    margin-bottom: 20px;

    .center-block {
      width: 324px;
      height: 194px;
      margin: 0 auto;
      display: flex;
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;

      &:hover {
        background: #f5f6f9;
      }

      .center-img {
        width: 48px;
        height: 48px;
        margin-right: 16px;
      }

      .center-content {
        position: relative;

        .center-title {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #303133;
          line-height: 25px;
          margin-bottom: 8px;
        }

        .center-desc {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 20px;
        }

        .center-func {
          position: absolute;
          bottom: 1px;
          left: 0px;
          display: flex;
          cursor: pointer;

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #001e70;
            line-height: 22px;
            margin-right: 8px;
          }

          img {
            width: 23px;
            height: 23px;
          }
        }
      }
    }
  }
}
</style>
